<template>
  <div class="areas-box">
    <div>
      <div class="area-item">
        <slot name="province">省：</slot>
      </div>
      <el-select
        v-model="obj.province"
        filterable
        placeholder="全部省份"
        @change="provincechange()"
      >
        <el-option
          v-for="item in ProvinceLists"
          :key="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <div class="area-item"><slot name="city"></slot></div>
      <el-select
        v-if="isShowcity"
        v-model="obj.city"
        filterable
        placeholder="全部市"
        @change="citychange()"
        :disabled="disabledcitys"
      >
        <el-option
          v-for="(item, index) in cityLists"
          :key="index"
          :value="item.name"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <div class="area-item"><slot class="slot" name="area"></slot></div>
      <el-select
        :disabled="disabledareas"
        v-if="isShowarea"
        v-model="obj.area"
        filterable
        placeholder="全部区"
      >
        <el-option
          v-for="(item, index) in areaLists"
          :key="index"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { Bus } from "../../Bus";
import ProvinceList from "../../assets/data.js";
export default {
  data() {
    return {
      ProvinceLists: ProvinceList,
      cityLists: "",
      areaLists: "",
      obj: {
        province: "",
        city: "",
        area: "",
      },
      isShowcity: false,
      isShowarea: false,
      disabledcitys: true,
      disabledareas: true,
      dynamicSlotName: "city",
    };
  },
  beforeCreate() {
    Bus.$on("isshowcity", (value) => {
      this.isShowcity = value;
    });
    Bus.$on("isshowarea", (value) => {
      this.isShowarea = value;
    });
  },
  mounted() {},
  methods: {
    provincechange() {
      this.disabledcitys = false;
      //传递省市区数据
      this.obj.city = "";
      this.obj.area = "";
      for (let item of this.ProvinceLists) {
        if (this.obj.province == item.name) {
          this.cityLists = item.cityList;
          this.obj.city = this.cityLists[0].name;
          this.areaLists = this.cityLists[0].areaList;
          this.obj.area = this.areaLists[0];
        }
      }
    },
    citychange() {
      this.disabledareas = false;
      //传递省市区数据
      this.obj.area = "";
      for (let item of this.cityLists) {
        if (this.obj.city == item.name) {
          this.areaLists = item.areaList;
          this.obj.area = this.areaLists[0];
        }
      }
    },
  },
  watch: {
    obj: {
      deep: true,
      handler() {
        Bus.$emit("areadatas", this.obj);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.areas-box {
  display: flex;
  align-items: center;
}
.areas-box > div {
  display: flex;
  align-items: center;
}
</style>